<!DOCTYPE html>
<html>
<head>
		
	<meta name="layout" content="main"/>
	<title>KioscoDeal</title>

	<link rel="stylesheet"
		href="${resource(dir: 'css', file: 'bootstrap-responsive.min.css')}"
		type="text/css" />
	<!-- Bootstrap CSS Toolkit styles -->
	<link rel="stylesheet"
		href="${resource(dir:'css', file:'bootstrap.min.css')}" type="text/css" />
	<link rel="stylesheet"
		href="${resource(dir:'css', file:'index.css')}" type="text/css" />		
		

</head>

<body class="homepage" id="body">
	

<script type="text/javascript">
           $(function() {
			$('#photoZoomContainer img').hover(
				function(){
					var $this = $(this);
					$this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
				},
				function(){
					var $this = $(this);
					$this.stop().animate({'opacity':'0.5','height':'300px','top':'-66.5px','left':'-150px'});
				}
			);
           });
       </script>
	
	<div id="wrapper">
	
		<div id="subheader">
			<div class="container">
				<div class="row">
					<div class="span12">
						<g:isOnline>
							<global:carousel ></global:carousel>
						</g:isOnline>
						<g:isOffline>
						
						 	<div id="photoZoomContainer" class="photoZoomContainer">
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'alfajores.jpg')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'choco-milka.jpg')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'cindor-chica.jpg')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'coca-600.jpg')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'chocoarroz.jpg')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'papas-lays.jpg')}" alt="image" />									
									</a>								
								</div>								
							</div>	
							<div id="photoZoomContainer" class="photoZoomContainer">
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: '9 de oro.gif')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'cigarros.jpg')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'citric-jugo.jpg')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'jorgito-bizc.jpg')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'mix-galletitas.jpg')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'saladix.jpg')}" alt="image" />									
									</a>								
								</div>								
							</div>
							<div id="photoZoomContainer" class="photoZoomContainer">
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'barritas.jpg')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'frutas.jpg')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'helados.jpg')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'sandwich.jpg')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'yogures.jpg')}" alt="image" />									
									</a>								
								</div>
								<div class="wrap">
									<a href="#" >
										<img  src="${resource(dir:'images/bootstrap-images', file: 'yerbas.JPG')}" alt="image" />									
									</a>								
								</div>								
							</div>																
						</g:isOffline>
					</div>
				</div>
			</div>
		</div>
		
	</div>
	<g:render template="footer" />			
</body>

</html>
